<template>
  <el-dialog
    title="修改个人信息"
    width="40%"
    top="30px"
    :close-on-click-modal="false"
    :before-close="handleClose"
    :visible.sync="visible"
  >
    <el-form label-width="100px" :model="meData" :rules="rules" ref="form">
      <el-form-item label="头像">
        <upload-oss
          single-image
          ref="upload"
          accept="image/*"
          :on-complete="handleComplete"
          :file-list="fileList"
        ></upload-oss>
      </el-form-item>
      <el-form-item label="姓名" prop="realName">
        <el-input v-model="meData.realName"></el-input>
      </el-form-item>
      <el-form-item label="电话号码" prop="phoneNumber">
        <el-input v-model="meData.phoneNumber"></el-input>
      </el-form-item>
      <el-form-item label="所属地">
        <select-address
          v-model="meData.addressCode"
          class="w-100"
          auto-top
          placeholder="选择地址"
        ></select-address>
      </el-form-item>
      <el-form-item label="地址详情">
        <el-input placeholder="地址详情" class="form-sl" v-model="meData.addressDetail"></el-input>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="meData.idCard"></el-input>
      </el-form-item>
      <el-form-item label="身份证照片">
        <ul class="list-inline">
          <li class="list-inline-item">
            <upload-oss
              single-image
              ref="uploadIdf"
              accept="image/*"
              :on-complete="handleIdfComplete"
              :file-list="idCardImg[0]"
            ></upload-oss>
            <div class="text-muted text-center">身份证正面</div>
          </li>
          <li class="list-inline-item">
            <upload-oss
              single-image
              ref="uploadIde"
              accept="image/*"
              :on-complete="handleIdeComplete"
              :file-list="idCardImg[1]"
            ></upload-oss>
            <div class="text-muted text-center">身份证反面</div>
          </li>
        </ul>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onOrgEdit" :loading="loading">修 改</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import SelectAddress from '@/components/select/SelectAddress'
import { putUser } from '@/common/api/auth'

export default {
  components: {
    SelectAddress,
  },

  props: {
    visible: Boolean,
  },

  data() {
    return {
      images: '',
      idImages: '',
      rules: {
        realName: [{ required: true, message: '请填写名字', trigger: 'blur' }],
        phoneNumber: [{ required: true, message: '请填写电话号码', trigger: 'blur' }],
      },
      loading: false,
      meData: {},
    }
  },

  computed: {
    userData() {
      return this.$store.getters.user
    },

    fileList: {
      set: function () {},
      get: function () {
        let image = this.userData.headImg
        if (image) {
          return [{ name: '', url: image }]
        } else {
          return []
        }
      },
    },

    idCardImg: {
      set: function () {},
      get: function () {
        let images = this.userData.idCardImg
        if (images) {
          return [[{ name: '', url: images[0] }], [{ name: '', url: images[1] }]]
        } else {
          return [[], []]
        }
      },
    },
  },

  watch: {
    userData: {
      handler: function () {
        this.meData = { ...this.userData }
      },
      deep: true,
      immediate: true,
    },
  },

  created() {},

  mounted() {},

  methods: {
    onOrgEdit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$refs.upload.submit()
        } else {
          this.$message.error('输入错误，请重新填写!')
        }
      })
    },

    handleComplete(images) {
      this.images = images.length ? `${images[0].url}` : ''
      this.$refs.uploadIdf.submit()
    },

    handleIdfComplete(images) {
      this.idImages = images.length ? [images[0].url] : ['']
      this.$refs.uploadIde.submit()
    },

    handleIdeComplete(images) {
      this.idImages.push(images.length ? images[0].url : '')
      this.putMe()
    },

    putMe() {
      let data = {
        headImg: this.images,
        realName: this.meData.realName,
        phoneNumber: this.meData.phoneNumber,
        idCard: this.meData.idCard,
        clientId: this.meData.clientId,
        openId: this.meData.openId,
        userId: this.meData.userId,
        addressCode: this.meData.addressCode,
        addressDetail: this.meData.addressDetail,
      }
      if (!this.idImages.every(img => img === '')) {
        data.idCardImgStr = `["${this.idImages.join('","')}"]`
      }
      this.loading = true
      putUser(data)
        .then(res => {
          if (res.data > 0) {
            this.$emit('update:visible', false)
            this.$message.success('修改个人信息成功！')
            this.$store.dispatch('getMe')
          } else {
            this.$message.error('修改个人信息错误，请重试！')
          }
        })
        .catch(() => {
          this.$message.error('修改个人信息错误，请重试！')
        })
        .then(() => {
          this.loading = false
        })
    },

    handleClose() {
      this.meData = { ...this.userData }
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style scoped></style>
